<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十五年之约</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
    <!-- 背景装饰和粒子效果 -->
    <div class="background-container">
        <div class="floating-petals" id="petalsContainer"></div>
        <div class="particle-field" id="particleField"></div>
        <div class="romantic-bg">
            <!-- SVG浪漫背景 -->
            <svg class="bg-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
                        <stop offset="50%" style="stop-color:#16213e;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#0f3460;stop-opacity:1" />
                    </linearGradient>
                    <radialGradient id="moonGlow">
                        <stop offset="0%" style="stop-color:#fff;stop-opacity:0.8" />
                        <stop offset="50%" style="stop-color:#ffd700;stop-opacity:0.3" />
                        <stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:0.1" />
                    </radialGradient>
                </defs>
                <rect width="1920" height="1080" fill="url(#skyGradient)"/>
                <circle cx="1600" cy="200" r="80" fill="url(#moonGlow)" opacity="0.6"/>
                <path d="M0,600 Q400,550 800,600 T1600,600 L1920,1080 L0,1080 Z" fill="#1a1a2e" opacity="0.3"/>
                <path d="M0,700 Q300,650 600,700 T1200,700 L1920,1080 L0,1080 Z" fill="#16213e" opacity="0.4"/>
            </svg>
        </div>
    </div>

    <!-- 导航栏 -->
    <nav class="nav-container">
        <div class="nav-logo">十五年之约</div>
        <ul class="nav-menu">
            <li><a href="#countdown">倒计时</a></li>
            <li><a href="#opening">开篇</a></li>
            <li><a href="#youth">年少</a></li>
            <li><a href="#searching">寻觅</a></li>
            <li><a href="#reunion">重逢</a></li>
            <li><a href="#future">未来</a></li>
            <li><a href="#gallery">相册</a></li>
        </ul>
        <div class="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <!-- 1. 倒计时页面 -->
    <section id="countdown" class="section countdown-section">
        <div class="container">
            <div class="countdown-wrapper" data-aos="fade-up" data-aos-duration="2000">
                <!-- SVG装饰：曼殊沙华 -->
                <div class="flower-decoration">
                    <svg class="man-shu-sha-hua" viewBox="0 0 200 400" width="150" height="300">
                        <defs>
                            <linearGradient id="petalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#c44569;stop-opacity:1" />
                            </linearGradient>
                            <linearGradient id="leafGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#2ecc71;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#27ae60;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <!-- 花朵 -->
                        <g class="flower-group" transform="translate(100, 80)">
                            <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(0)" opacity="0.8"/>
                            <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(45)" opacity="0.8"/>
                            <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(90)" opacity="0.8"/>
                            <ellipse cx="0" cy="-30" rx="25" ry="40" fill="url(#petalGradient)" transform="rotate(135)" opacity="0.8"/>
                            <circle cx="0" cy="0" r="15" fill="#ffd700"/>
                            <line x1="0" y1="15" x2="0" y2="250" stroke="#2ecc71" stroke-width="4"/>
                        </g>
                        <!-- 叶子 -->
                        <ellipse cx="70" cy="200" rx="30" ry="50" fill="url(#leafGradient)" transform="rotate(30 70 200)" opacity="0.7"/>
                        <ellipse cx="130" cy="250" rx="25" ry="40" fill="url(#leafGradient)" transform="rotate(-20 130 250)" opacity="0.7"/>
                    </svg>
                </div>

                <h1 class="countdown-title">双向奔赴</h1>
                <p class="countdown-subtitle">曼殊沙华的等待，终将在花开时相见</p>

                <div class="countdown-display">
                    <div class="time-unit">
                        <span class="time-value" id="days">00</span>
                        <span class="time-label">天</span>
                    </div>
                    <div class="time-unit">
                        <span class="time-value" id="hours">00</span>
                        <span class="time-label">小时</span>
                    </div>
                    <div class="time-unit">
                        <span class="time-value" id="minutes">00</span>
                        <span class="time-label">分钟</span>
                    </div>
                    <div class="time-unit">
                        <span class="time-value" id="seconds">00</span>
                        <span class="time-label">秒</span>
                    </div>
                </div>

                <div class="meeting-info">
                    <div class="info-item">
                        <svg class="info-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                        <div class="info-text">
                            <strong>时间</strong>
                            <span>2025年10月26日 上午11:21</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <svg class="info-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <div class="info-text">
                            <strong>地点</strong>
                            <span>徐州东站</span>
                        </div>
                    </div>
                </div>

                <div class="romantic-message">
                    <p>曼殊沙华花开叶落，花叶永不相见</p>
                    <p>但我们的爱，终将跨越时空的阻隔</p>
                    <p class="highlight-text">在最美的时刻，热烈重逢 💕</p>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <div class="scroll-arrow"></div>
        </div>
    </section>

    <!-- 2. 开篇 - 曼殊沙花 -->
    <section id="opening" class="section hero-section">
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="2000">
                <!-- SVG曼殊沙华装饰 -->
                <div class="hero-svg-decoration">
                    <svg viewBox="0 0 800 600" class="floating-flowers">
                        <defs>
                            <linearGradient id="heroPetal1" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:0.8" />
                                <stop offset="100%" style="stop-color:#c44569;stop-opacity:0.8" />
                            </linearGradient>
                        </defs>
                        <g class="flower-1" transform="translate(150, 150)">
                            <circle cx="0" cy="0" r="3" fill="#ff6b9d"/>
                            <path d="M0,0 Q-20,-30 -10,-60 Q0,-40 10,-60 Q20,-30 0,0" fill="url(#heroPetal1)"/>
                        </g>
                        <g class="flower-2" transform="translate(650, 200)">
                            <circle cx="0" cy="0" r="3" fill="#ff6b9d"/>
                            <path d="M0,0 Q-20,-30 -10,-60 Q0,-40 10,-60 Q20,-30 0,0" fill="url(#heroPetal1)"/>
                        </g>
                        <g class="flower-3" transform="translate(400, 400)">
                            <circle cx="0" cy="0" r="3" fill="#ff6b9d"/>
                            <path d="M0,0 Q-20,-30 -10,-60 Q0,-40 10,-60 Q20,-30 0,0" fill="url(#heroPetal1)"/>
                        </g>
                    </svg>
                </div>

                <h1 class="hero-title handwritten">曼殊沙华</h1>
                <p class="hero-subtitle">花开一季，叶生一程，花叶永不相见</p>
                <div class="hero-quote">
                    <p>我们的故事，仿佛从一开始就写下了同样的谶言</p>
                </div>

                <!-- 音乐播放器 -->
                <div class="music-player">
                    <button id="playBtn" class="play-btn">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </button>
                    <div class="track-info">
                        <div class="track-title">Beautiful In White</div>
                        <div class="track-artist">Shane Filan</div>
                    </div>
                    <audio id="bgMusic" preload="auto">
                        <source src="assets/audio/beautiful-in-white.mp3" type="audio/mpeg">
                    </audio>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. 年少时光 -->
    <section id="youth" class="section youth-section">
        <div class="container">
            <div class="section-header" data-aos="fade-right">
                <h2 class="section-title">年少时光</h2>
                <p class="section-subtitle">在最贫瘠的年纪遇见最美的你</p>
            </div>

            <div class="content-grid">
                <div class="text-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="card-icon">
                        <svg width="40" height="40" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="30" fill="#ffd700" opacity="0.3"/>
                            <path d="M50,20 Q60,40 50,60 Q40,40 50,20" fill="#ff6b9d" opacity="0.6"/>
                        </svg>
                    </div>
                    <p class="poem-text">
                        年少时，我们像两株被命运错开了时序的植物<br>
                        在最贫瘠、最笨拙的年纪，刚刚抽枝发芽<br>
                        还未曾让花瓣彻底舒展，未曾好好将你的笑容收进心里<br>
                        甚至还没真正看到你的笑脸
                    </p>
                </div>

                <div class="text-card highlight" data-aos="fade-up" data-aos-delay="400">
                    <div class="card-icon">
                        <svg width="40" height="40" viewBox="0 0 100 100">
                            <path d="M50,25 L60,45 L80,45 L65,60 L70,80 L50,65 L30,80 L35,60 L20,45 L40,45 Z" fill="#ffd700"/>
                        </svg>
                    </div>
                    <p class="poem-text handwritten">
                        初恋时应有的山盟海誓还没说出口<br>
						就化作一根柔刺<br>
                        咽不下，是年少的遗憾<br>
                        吐不出，是多年的眷恋
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. 寻觅岁月 -->
    <section id="searching" class="section searching-section">
        <div class="container">
            <div class="section-header" data-aos="fade-left">
                <h2 class="section-title">寻觅岁月</h2>
                <p class="section-subtitle">在雨夜里寻找你的身影</p>
            </div>

            <div class="timeline">
                <div class="timeline-item" data-aos="fade-up" data-aos-delay="200">
                    <div class="timeline-icon">
                        <svg width="30" height="30" viewBox="0 0 100 100">
                            <path d="M50,10 L60,40 L90,40 L65,60 L75,90 L50,70 L25,90 L35,60 L10,40 L40,40 Z" fill="#4a90e2"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <p>那时我没有反抗的能力。只能用最幼稚的方式抗衡</p>
                        <p class="italic">在雨夜里狂奔，在墙壁上涂写无人能懂的句子</p>
                        <p class="italic">晚自习时躲在楼道里吸着一根一根的劣质烟</p>
                        <p class="italic">靠在冰冷的栏杆上睡着</p>

                        <!-- SVG雨夜场景 -->
                        <div class="scene-svg">
                            <svg width="200" height="100" viewBox="0 0 200 100" class="rain-scene">
                                <defs>
                                    <linearGradient id="nightSky" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
                                    </linearGradient>
                                </defs>
                                <rect width="200" height="100" fill="url(#nightSky)"/>
                                <circle cx="160" cy="20" r="8" fill="#ffd700" opacity="0.8"/>
                                <g class="rain-drops">
                                    <line x1="20" y1="20" x2="18" y2="35" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                    <line x1="50" y1="15" x2="48" y2="30" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                    <line x1="80" y1="25" x2="78" y2="40" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                    <line x1="110" y1="18" x2="108" y2="33" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                    <line x1="140" y1="22" x2="138" y2="37" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                    <line x1="170" y1="16" x2="168" y2="31" stroke="#4a90e2" stroke-width="1" opacity="0.6"/>
                                </g>
                                <rect x="0" y="70" width="200" height="30" fill="#2c3e50" opacity="0.8"/>
                                <rect x="20" y="50" width="15" height="20" fill="#34495e"/>
                                <rect x="60" y="45" width="20" height="25" fill="#34495e"/>
                                <rect x="120" y="55" width="18" height="15" fill="#34495e"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
                    <div class="timeline-icon">
                        <svg width="30" height="30" viewBox="0 0 100 100">
                            <rect x="20" y="30" width="60" height="40" fill="#e74c3c" rx="5"/>
                            <circle cx="50" cy="50" r="8" fill="#fff"/>
                            <path d="M30,70 L40,90 L60,90 L70,70" fill="#f39c12"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <p>用过各种可以查看街景的地图软件，查看你所在地</p>
                        <p class="handwritten highlight-text">普明寺后街，富临医院，鑫品佳园，万富村...</p>
                        <p>试图在你可能存在的空间里，找到你的身影</p>

                        <!-- SVG地图标记 -->
                        <div class="scene-svg">
                            <svg width="200" height="120" viewBox="0 0 200 120" class="map-scene">
                                <rect width="200" height="120" fill="#ecf0f1"/>
                                <g class="map-grid">
                                    <line x1="50" y1="0" x2="50" y2="120" stroke="#bdc3c7" stroke-width="1"/>
                                    <line x1="100" y1="0" x2="100" y2="120" stroke="#bdc3c7" stroke-width="1"/>
                                    <line x1="150" y1="0" x2="150" y2="120" stroke="#bdc3c7" stroke-width="1"/>
                                    <line x1="0" y1="30" x2="200" y2="30" stroke="#bdc3c7" stroke-width="1"/>
                                    <line x1="0" y1="60" x2="200" y2="60" stroke="#bdc3c7" stroke-width="1"/>
                                    <line x1="0" y1="90" x2="200" y2="90" stroke="#bdc3c7" stroke-width="1"/>
                                </g>
                                <g class="location-pins">
                                    <circle cx="80" cy="40" r="8" fill="#e74c3c"/>
                                    <circle cx="120" cy="70" r="8" fill="#e74c3c"/>
                                    <circle cx="60" cy="90" r="8" fill="#e74c3c"/>
                                    <circle cx="140" cy="50" r="8" fill="#e74c3c"/>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="600">
                    <div class="timeline-icon">
                        <svg width="30" height="30" viewBox="0 0 100 100">
                            <path d="M50,10 Q20,10 20,40 Q20,70 50,90 Q80,70 80,40 Q80,10 50,10" fill="#e74c3c" opacity="0.8"/>
                            <circle cx="50" cy="40" r="8" fill="#fff"/>
                        </svg>
                    </div>
                    <div class="timeline-content">
                        <p>曾攒起一丝勇气，试探着走向你的世界</p>
                        <p>却发现你的身边早已有了他</p>
                        <p class="poetic-text">不敢点开你的头像，生怕从任何一丝蛛丝马迹里，窥见你们安稳幸福的日常</p>
                        <p class="poetic-text">那是我曾梦想过，却未能给你的未来</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. 重逢曙光 -->
    <section id="reunion" class="section reunion-section">
        <div class="container">
            <div class="section-header" data-aos="zoom-in">
                <h2 class="section-title">重逢曙光</h2>
                <p class="section-subtitle">2022年3月16日，那个改变一切的傍晚</p>
            </div>

            <div class="moment-container">
                <div class="moment-text" data-aos="fade-up" data-aos-delay="200">
                    <p class="date-highlight">2022年3月16日，傍晚，疫情，阴天，很冷</p>
                    <p class="moment-desc">独自在空荡的公园里，思索着未来的轮廓</p>
                    <p class="moment-desc">手机屏幕亮起，是你的名字，一句疫情的问候</p>
                </div>

                <!-- SVG曙光场景 -->
                <div class="svg-scene" data-aos="fade-up" data-aos-delay="300">
                    <svg width="400" height="200" viewBox="0 0 400 200" class="dawn-scene">
                        <defs>
                            <linearGradient id="dawnSky" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
                                <stop offset="50%" style="stop-color:#e67e22;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#f39c12;stop-opacity:1" />
                            </linearGradient>
                            <radialGradient id="sunRays">
                                <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:0.3" />
                            </radialGradient>
                        </defs>
                        <rect width="400" height="200" fill="url(#dawnSky)"/>
                        <circle cx="320" cy="60" r="25" fill="url(#sunRays)"/>
                        <g class="sun-rays">
                            <line x1="320" y1="20" x2="320" y2="35" stroke="#ffd700" stroke-width="2" opacity="0.8"/>
                            <line x1="320" y1="85" x2="320" y2="100" stroke="#ffd700" stroke-width="2" opacity="0.8"/>
                            <line x1="280" y1="60" x2="295" y2="60" stroke="#ffd700" stroke-width="2" opacity="0.8"/>
                            <line x1="345" y1="60" x2="360" y2="60" stroke="#ffd700" stroke-width="2" opacity="0.8"/>
                        </g>
                        <path d="M0,150 Q100,130 200,140 T400,150 L400,200 L0,200 Z" fill="#34495e" opacity="0.6"/>
                        <circle cx="80" cy="130" r="3" fill="#fff" opacity="0.8"/>
                        <circle cx="150" cy="120" r="2" fill="#fff" opacity="0.6"/>
                        <circle cx="250" cy="125" r="3" fill="#fff" opacity="0.7"/>
                        <circle cx="320" cy="115" r="2" fill="#fff" opacity="0.5"/>
                    </svg>
                </div>

                <div class="metaphor-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="card-content">
                        <p class="metaphor-text">
                            像是在漫长极夜后瞥见的第一缕曙光<br>
                            带着足以灼伤人的温暖，瞬间穿透了我世界里所有积郁的阴霾与尘埃
                        </p>
                        <p class="heart-beat-text">心里一直给你留着的空间，被打开了一点缝隙</p>
                    </div>
                </div>

                <div class="journey-text" data-aos="fade-up" data-aos-delay="600">
                    <p class="poem-text">
                        往回走的路上，迫不及待的想要跟你说话<br>
                        但不知道该怎么面对你，仿佛用了很大力气才克制住不让自己奔跑起来<br>
                        耳边只有自己的心跳声<br>
                        忍着到了家，才小心的跟你交流
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. 深情对话 -->
    <section id="connection" class="section connection-section">
        <div class="container">
            <div class="section-header" data-aos="fade-right">
                <h2 class="section-title">深情对话</h2>
                <p class="section-subtitle">灵魂最深处的触碰</p>
            </div>

            <div class="conversation-flow">
                <div class="flow-card" data-aos="fade-up" data-aos-delay="200">
                    <p class="flow-text">
                        我像一个小心翼翼的考古学家，捧着你发来的每一个字<br>
                        试图从那些简单的音节里，挖掘出你这些年的悲喜
                    </p>
                </div>

                <div class="flow-card emotional" data-aos="fade-up" data-aos-delay="400">
                    <p class="flow-text">
                        情感的闸门一旦打开，便再难遏制<br>
                        我们从小心翼翼到无话不谈，距离近到可以触碰彼此灵魂最深处的柔软与伤痕
                    </p>
                </div>

                <div class="dreams-list" data-aos="fade-up" data-aos-delay="600">
                    <h3 class="dream-title">分开那两年，时常梦到你...</h3>
                    <ul class="dream-items">
                        <li>梦到和你一起找那张叔叔的老照片，却怎么也找不到，急到要哭</li>
                        <li>梦到你孕期咳嗽，却只能忍着独自痛苦</li>
                        <li>梦到你不停的为他家的糟心事奔波，宁愿自己受委屈也要照顾他们</li>
                        <li>梦到给你洗脚，擦脸，再把护手霜涂到脚丫子上</li>
                        <li>梦到一起干活你嫌我笨的碍手碍脚赶我走，我还死皮赖脸的说做的来</li>
                    </ul>
                </div>

                <div class="realization-card" data-aos="zoom-in" data-aos-delay="800">
                    <p class="realization-text">
                        如今回看，不过是两个害怕再次失去的人<br>
                        在进行一场漫长而虔诚的试探<br>
                        <span class="highlight-line">直到最后，理智的堤坝被思念彻底冲垮，我们都再也无法忍受这隔屏相望的煎熬</span>
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. 穿越人海 -->
    <section id="meeting" class="section meeting-section">
        <div class="container">
            <div class="section-header" data-aos="fade-up">
                <h2 class="section-title">穿越人海</h2>
                <p class="section-subtitle">终于的相拥</p>
            </div>

            <div class="meeting-moment">
                <!-- SVG人海场景 -->
                <div class="svg-scene-large" data-aos="fade-up" data-aos-delay="200">
                    <svg width="600" height="300" viewBox="0 0 600 300" class="crowd-scene">
                        <defs>
                            <linearGradient id="crowdBg" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" style="stop-color:#ecf0f1;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#bdc3c7;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <rect width="600" height="300" fill="url(#crowdBg)"/>
                        <g class="crowd-figures">
                            <!-- 背景人群剪影 -->
                            <ellipse cx="50" cy="250" rx="15" ry="25" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="100" cy="240" rx="12" ry="20" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="150" cy="255" rx="14" ry="22" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="200" cy="245" rx="13" ry="21" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="250" cy="250" rx="15" ry="25" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="300" cy="240" rx="12" ry="20" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="350" cy="255" rx="14" ry="22" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="400" cy="245" rx="13" ry="21" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="450" cy="250" rx="15" ry="25" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="500" cy="240" rx="12" ry="20" fill="#34495e" opacity="0.3"/>
                            <ellipse cx="550" cy="255" rx="14" ry="22" fill="#34495e" opacity="0.3"/>
                        </g>
                        <!-- 聚焦的两个身影 -->
                        <g class="focused-couple" transform="translate(300, 200)">
                            <ellipse cx="-30" cy="40" rx="20" ry="35" fill="#e74c3c" opacity="0.8"/>
                            <ellipse cx="30" cy="40" rx="20" ry="35" fill="#ff6b9d" opacity="0.8"/>
                            <path d="M-30,20 Q0,10 30,20" stroke="#ffd700" stroke-width="3" fill="none"/>
                            <circle cx="-30" cy="0" r="12" fill="#f39c12"/>
                            <circle cx="30" cy="0" r="12" fill="#f39c12"/>
                        </g>
                        <text x="300" y="50" text-anchor="middle" fill="#2c3e50" font-size="24" font-weight="bold">穿越人海拥抱你</text>
                    </svg>
                </div>

                <div class="moment-quote large-text" data-aos="fade-up" data-aos-delay="300">
                    <p>
                        当我终于穿越人海，站在你面前<br>
                        看见你眼中映出的我的身影时<br>
                        心底那根卡了多年的刺，伴随着所有冰封的岁月<br>
                        <span class="impact-text">应声碎裂</span>
                    </p>
                </div>

                <div class="emotional-release" data-aos="fade-up" data-aos-delay="400">
                    <p class="release-text">
                        过去所有的辗转反侧，所有无望的等待与追寻<br>
                        都在这一刻，找到了唯一的归宿和答案<br>
						一切，都值得了
                    </p>
                </div>

                <div class="gratitude-card" data-aos="zoom-in" data-aos-delay="600">
                    <p class="handwritten gratitude-text">
                        谢谢你凤儿，还愿意给我们这个机会。<br>
                        谢谢你，让迷失了整整一个青春的曼殊与沙华，<br>
                        终于能在同一个季节里，热烈地重逢相拥。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. 未来憧憬 -->
    <section id="future" class="section future-section">
        <div class="container">
            <div class="section-header" data-aos="fade-right">
                <h2 class="section-title">未来憧憬</h2>
                <p class="section-subtitle">我们一起续写的故事</p>
            </div>

            <div class="dreams-grid">
                <div class="dream-category travel" data-aos="fade-up" data-aos-delay="200">
                    <div class="category-icon">
                        <!-- SVG旅行图标 -->
                        <svg width="60" height="60" viewBox="0 0 100 100">
                            <path d="M50,10 L60,40 L90,40 L65,60 L75,90 L50,70 L25,90 L35,60 L10,40 L40,40 Z" fill="#3498db"/>
                            <circle cx="50" cy="50" r="35" fill="none" stroke="#3498db" stroke-width="2" stroke-dasharray="5,5"/>
                        </svg>
                    </div>
                    <h3>你想做的事</h3>
                    <ul>
                        <li>去趟西藏，看最纯净的天空，感受最虔诚的信仰</li>
                        <li>去趟云南，到玉龙雪山：看云海，最好能遇到日照金山</li>
                        <li>回到成都，熊猫基地看成群的熊猫，看变脸表演，欣赏四川文化</li>
                    </ul>
                </div>

                <div class="dream-category food" data-aos="fade-up" data-aos-delay="400">
                    <div class="category-icon">
                        <!-- SVG美食图标 -->
                        <svg width="60" height="60" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="30" fill="#e74c3c"/>
                            <path d="M30,50 Q50,30 70,50 Q50,70 30,50" fill="#fff"/>
                            <circle cx="40" cy="45" r="3" fill="#2c3e50"/>
                            <circle cx="60" cy="45" r="3" fill="#2c3e50"/>
                        </svg>
                    </div>
                    <h3>想为你做的事</h3>
                    <ul>
                        <li>想看着你吃最喜欢的车厘子</li>
                        <li>想为你剥橙子，看你说很甜的样子</li>
                        <li>想为你选桃酥，为你擦掉嘴角的碎屑</li>
                        <li>想陪你吃卤味，看你吃得心满意足</li>
                    </ul>
                </div>

                <div class="dream-category daily" data-aos="fade-up" data-aos-delay="600">
                    <div class="category-icon">
                        <!-- SVG日常图标 -->
                        <svg width="60" height="60" viewBox="0 0 100 100">
                            <rect x="20" y="40" width="60" height="40" fill="#f39c12" rx="5"/>
                            <polygon points="20,40 50,20 80,40" fill="#e74c3c"/>
                            <rect x="40" y="55" width="20" height="25" fill="#2c3e50"/>
                            <circle cx="25" cy="55" r="3" fill="#3498db"/>
                            <circle cx="75" cy="55" r="3" fill="#3498db"/>
                        </svg>
                    </div>
                    <h3>我想要的日常</h3>
                    <ul>
                        <li>在你累的时候为你按摩，让你放松</li>
                        <li>每天为你吹干长发，看你在镜子前的笑容</li>
                        <li>想跟你回到老家，盖一座大房子</li>
                        <li>由你设计装修，陪你去逛家具，当然还要留有菜园</li>
                    </ul>
                </div>
            </div>

            <!-- SVG梦想房子 -->
            <div class="dream-house-svg" data-aos="fade-up" data-aos-delay="800">
                <svg width="400" height="250" viewBox="0 0 400 250" class="dream-house">
                    <defs>
                        <linearGradient id="roofGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#e74c3c;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#c0392b;stop-opacity:1" />
                        </linearGradient>
                        <linearGradient id="wallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#f39c12;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#e67e22;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <rect x="0" y="180" width="400" height="70" fill="#27ae60"/>
                    <polygon points="200,50 350,180 50,180" fill="url(#roofGradient)"/>
                    <rect x="100" y="180" width="200" height="100" fill="url(#wallGradient)"/>
                    <rect x="130" y="210" width="40" height="70" fill="#8b4513"/>
                    <rect x="230" y="210" width="40" height="70" fill="#8b4513"/>
                    <rect x="170" y="200" width="60" height="80" fill="#654321"/>
                    <circle cx="190" cy="240" r="3" fill="#ffd700"/>
                    <rect x="300" y="200" width="30" height="20" fill="#87ceeb"/>
                    <rect x="70" y="190" width="25" height="25" fill="#87ceeb"/>
                    <circle cx="50" cy="160" r="15" fill="#ffd700" opacity="0.8"/>
                    <text x="200" y="30" text-anchor="middle" fill="#2c3e50" font-size="20" font-weight="bold">我们的家</text>
                </svg>
            </div>

            <div class="ending-promise" data-aos="zoom-in" data-aos-delay="1000">
                <p class="promise-text">
                    还有很多很多想和你做的事，<br>
                    <span class="final-line">希望今后可以一起续写。</span>
                </p>
            </div>
        </div>
    </section>

    <!-- 9. 相册 -->
    <section id="gallery" class="section gallery-section">
        <div class="container">
            <div class="section-header" data-aos="fade-up">
                <h2 class="section-title">回忆相册</h2>
                <p class="section-subtitle">记录我们的点点滴滴</p>
            </div>

            <div class="gallery-upload" data-aos="fade-up" data-aos-delay="200">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">📸</div>
                    <p>点击添加你们的照片</p>
                    <input type="file" id="photoInput" accept="image/*" multiple style="display: none;">
                </div>
            </div>

            <div class="gallery-grid" id="galleryGrid">
                <div class="photo-placeholder" data-aos="fade-up">
                    <div class="placeholder-content">
                        <span>📷</span>
                        <p>第一张照片等待添加...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p class="footer-text">给我的凤儿</p>
                <p class="footer-date">Created with ❤️ | 2024</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/gallery.js"></script>
    <script src="js/music.js"></script>
</body>
</html>